<template>
     <div class="bql">
      <p>
        <van-tabbar v-model="active" active-color="rgb(16, 185, 252)">
          <van-tabbar-item icon="home-o" :to="{ path: '/home', query: { active : 0 }}">首页</van-tabbar-item>

          <van-tabbar-item icon="search" :to="{ path: '/free', query: { active : 1 }}">
            <!-- <template #icon="props">
              <img :src="props.active ? icon.active : icon.search" alt="search" />
            </template> -->
            自由行
          </van-tabbar-item>
          <van-tabbar-item icon="friends-o" :to="{ path: '/group', query: { active : 2 }}">
            <!-- <template #icon="props">
              <img :src="props.active ? icon.active : icon.group" alt="group" />
            </template> -->
            跟团游
          </van-tabbar-item>
          <van-tabbar-item icon ="service" :to="{ path: '/service', query: { active : 3 }}">
            <!-- <template #icon="props">
              <img :src="props.active ? icon.active : icon.helper" alt="helper" />
            </template> -->
            助手
          </van-tabbar-item>
          <van-tabbar-item icon="contact" :to="{ path: '/my', query: { active : 4 }}">
            <!-- <template #icon="props">
              <img :src="props.active ? icon.active : icon.my" alt="settings" />
            </template> -->
            我的
          </van-tabbar-item>
        </van-tabbar>
      </p>
    </div>
</template>
<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { ref } from 'vue';
const route = useRoute()
const active = ref(
  route.query.active ? Number(route.query.active) : 0 // 显式类型转换 + 默认值
)

const icon = {
  home: '/path/to/home-icon.png',
  search: '/path/to/search-icon.png',
  group: '/path/to/group-icon.png',
  helper: '/path/to/helper-icon.png',
  my: '/path/to/settings-icon.png',
  active: '/path/to/active-icon.png'
};

</script>
<style scoped>
van-tabbar-item {
  display: inline;
  width: 20%;
}</style>